<template>
  <div class="container-fluid seachDIV">
    <div class="row searchTitle">
      搜你想看
    </div>
    <div class="row">
      <div class="col search-container">
        <img src="../../assets/search.png" alt="search" class="searchBtn" @click="search" />
        <input type="text" v-model="searchQuery" @keyup.enter="search"  class="so" name="so" value="" placeholder="输入书名搜索">
        <!--<button class="searchBtn" @click="search">搜索</button>-->
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'; // 引用 Vue 的 ref
import { useRouter } from 'vue-router'; // 引用 Vue Router

const searchQuery = ref(''); // 绑定输入框的值
const router = useRouter(); // 获取路由实例

// 搜索方法
const search = () => {
  if (searchQuery.value.trim() !== '') { // 确保输入值不为空
    router.push(`/so/${encodeURIComponent(searchQuery.value)}`); // 跳转到搜索路径
  } else {
    console.warn('请输入搜索关键词'); // 提示输入值不能为空
  }
};

</script>
<style scoped>
.search-container {
  width: 300px; /* 控制容器的宽度 */
  position: relative;
}
.so{
  width: 95%;
  margin: 8px 0px 0px 10px;
  border: white;
  outline: none;
  padding: 10px 10px 10px 40px;
  border-radius: 10px;
  background-color: #f2f2f2;
}
.searchTitle{
  padding:10px 20px 0px 20px;
  font-weight: bold;
  font-size: 22px;
  letter-spacing: 2px;
}
.searchBtn{
  position: absolute; /* 绝对定位 */
  left: 32px; /* 靠右 */
  top: 30px; /* 垂直居中 */
  transform: translateY(-50%); /* 垂直居中对齐 */
  width: 23px; /* 图标大小 */
  cursor: pointer;
}
.seachDIV{
  background-color: white;
  box-shadow: 0px 0px 80px rgba(0, 0, 0, 0.06);
  width: 90%;
  padding: 10px;
  margin-top: 10px;
  border-radius: 15px;
  padding-bottom: 20px;
}

</style>